<template>
  <div id="monitor-app">
    <router-view />
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'MonitorApp',
});
</script>

<style scoped>
#monitor-app {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: visible;
  position: relative;
  padding: 20px;
  box-sizing: border-box;
}

/* 确保在微前端容器中内容可以正常滚动 */
:global(.micro-frontend) #monitor-app {
  height: auto;
  min-height: fit-content;
}

/* 确保页面布局能够紧凑显示，底部版权信息贴近内容 */
:global(.tdesign-starter-footer-layout) {
  margin-top: 0 !important;
  position: relative !important;
}
</style>
